<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索 - 影享圈</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #000;
            color: white;
            height: 100vh;
            padding-top: 44px; /* Status bar height */
        }
        .bg-netflix {
            background-color: #E50914;
        }
        .text-netflix {
            color: #E50914;
        }
        .search-result-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.9);
            height: 83px;
            border-top: 1px solid #333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: env(safe-area-inset-bottom);
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 10px;
            text-decoration: none;
        }
        .bottom-nav a i {
            font-size: 22px;
            margin-bottom: 4px;
        }
        .bottom-nav a.active {
            color: white;
        }
    </style>
</head>
<body>
    <div class="relative min-h-screen pb-20">
        <!-- 顶部导航 -->
        <div class="fixed top-0 left-0 right-0 z-50 px-4 pt-12 pb-4 flex items-center justify-between bg-black">
            <div class="flex-1">
                <div class="relative">
                    <input type="text" class="w-full bg-gray-800 text-white pl-10 pr-4 py-2 rounded-full text-sm" placeholder="搜索影片、演员、导演..." value="流浪地球">
                    <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
                    <button class="absolute right-3 top-2 text-gray-400">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="pt-24 pb-24">
            <!-- 搜索结果 -->
            <div class="px-4">
                <!-- 搜索标签 -->
                <div class="flex mb-6 space-x-2 items-center">
                    <span class="text-sm text-gray-400">相关搜索：</span>
                    <a href="#" class="text-xs text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">流浪地球3</a>
                    <a href="#" class="text-xs text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">刘慈欣</a>
                    <a href="#" class="text-xs text-white px-3 py-1 rounded-full border border-gray-700 whitespace-nowrap">科幻电影</a>
                </div>

                <!-- 最佳匹配 -->
                <div class="mb-6">
                    <h3 class="text-lg font-bold mb-3">最佳匹配</h3>
                    <div class="flex space-x-4">
                        <div class="w-1/3">
                            <img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="流浪地球2" class="w-full aspect-[2/3] object-cover rounded-md">
                        </div>
                        <div class="flex-1">
                            <h4 class="text-xl font-bold mb-1">流浪地球2</h4>
                            <div class="flex text-sm text-gray-400 mb-2">
                                <span class="mr-2">2023</span>
                                <span class="mr-2">•</span>
                                <span class="mr-2">科幻</span>
                                <span class="mr-2">•</span>
                                <span>173分钟</span>
                            </div>
                            <div class="text-sm text-gray-400 mb-3 line-clamp-3">
                                太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，流浪地球时代的年轻人再次挺身而出，展开争分夺秒的生命之战。
                            </div>
                            <div class="flex space-x-2">
                                <button class="bg-netflix text-white py-1.5 px-4 rounded-full text-sm">播放</button>
                                <button class="bg-gray-800 text-white py-1.5 px-4 rounded-full text-sm">加入片单</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 相关影片 -->
                <div class="mb-6">
                    <h3 class="text-lg font-bold mb-3">相关影片</h3>
                    <div class="search-result-grid">
                        <div class="mb-3">
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1518930259200-3e5b29f42096?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1267&q=80" alt="流浪地球" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-sm mt-1 truncate">流浪地球</p>
                            <p class="text-xs text-gray-400">2019</p>
                        </div>
                        <div class="mb-3">
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80" alt="三体" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-sm mt-1 truncate">三体</p>
                            <p class="text-xs text-gray-400">2023</p>
                        </div>
                        <div class="mb-3">
                            <div class="rounded overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1635805737707-575885ab0820?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="星际穿越" class="w-full aspect-[2/3] object-cover">
                            </div>
                            <p class="text-sm mt-1 truncate">星际穿越</p>
                            <p class="text-xs text-gray-400">2014</p>
                        </div>
                    </div>
                </div>

                <!-- 演员/导演 -->
                <div class="mb-6">
                    <h3 class="text-lg font-bold mb-3">演员与导演</h3>
                    <div class="flex overflow-x-auto py-2 space-x-4 no-scrollbar">
                        <div class="flex-shrink-0 w-20 text-center">
                            <div class="w-20 h-20 rounded-full overflow-hidden mx-auto mb-2">
                                <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="吴京" class="w-full h-full object-cover">
                            </div>
                            <p class="text-sm">吴京</p>
                            <p class="text-xs text-gray-400">演员</p>
                        </div>
                        <div class="flex-shrink-0 w-20 text-center">
                            <div class="w-20 h-20 rounded-full overflow-hidden mx-auto mb-2">
                                <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="郭帆" class="w-full h-full object-cover">
                            </div>
                            <p class="text-sm">郭帆</p>
                            <p class="text-xs text-gray-400">导演</p>
                        </div>
                        <div class="flex-shrink-0 w-20 text-center">
                            <div class="w-20 h-20 rounded-full overflow-hidden mx-auto mb-2">
                                <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="刘德华" class="w-full h-full object-cover">
                            </div>
                            <p class="text-sm">刘德华</p>
                            <p class="text-xs text-gray-400">演员</p>
                        </div>
                        <div class="flex-shrink-0 w-20 text-center">
                            <div class="w-20 h-20 rounded-full overflow-hidden mx-auto mb-2">
                                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="刘慈欣" class="w-full h-full object-cover">
                            </div>
                            <p class="text-sm">刘慈欣</p>
                            <p class="text-xs text-gray-400">原著</p>
                        </div>
                    </div>
                </div>

                <!-- 搜索历史 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-lg font-bold">搜索历史</h3>
                        <button class="text-sm text-gray-400">清除</button>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <i class="fas fa-history text-gray-500 mr-3"></i>
                            <span class="flex-1">三体</span>
                            <button class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-history text-gray-500 mr-3"></i>
                            <span class="flex-1">满江红</span>
                            <button class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-history text-gray-500 mr-3"></i>
                            <span class="flex-1">刘德华</span>
                            <button class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <a href="#">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="#">
                <i class="fas fa-compass"></i>
                <span>探索</span>
            </a>
            <a href="#">
                <i class="fas fa-users"></i>
                <span>社交</span>
            </a>
            <a href="#">
                <i class="fas fa-download"></i>
                <span>下载</span>
            </a>
            <a href="#">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html>
